<template>
  <div class="theme-color-group">
    <label v-if="isTitle" class="input-label">主题色：</label>
    <div class="color-options">
      <div
        v-for="(color, index) in presetColors"
        :key="index"
        class="color-item"
        :class="{ selected: selectedColor === color.value }"
        :style="{ backgroundColor: color.value }"
        @click="handleColorSelect(color.value)"
        :title="color.name"
      >
        <!-- 选中对勾标记 -->
        <span v-if="selectedColor === color.value" class="check-mark"></span>
      </div>
      <div class="custom-color-wrapper">
        <slot name="customColor"></slot>
        <!-- <div class="custom-button-container">
          自定义  <el-color-picker  v-model="customColor" show-alpha @change="handleColorChange"></el-color-picker>
        </div> -->
        <!-- <ColorPicker v-model="customColor" @change="handleCustomColorChange" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import ColorPicker from "@/components/public/ColorPicker.vue";

export default {
  name: "ThemeColorSelector",
  components: {
    ColorPicker,
  },
  props: {
    isTitle: {
      type: Boolean,
      default: true,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    // 预设颜色列表
    presetColors: {
      type: Array,
      default: () => [
        { value: "#1890ff", name: "蓝色" },
        { value: "#52c41a", name: "绿色" },
        { value: "#fa8c16", name: "橙色" },
        { value: "#f5222d", name: "红色" },
      ],
    },
    // 当前选中的颜色
    selectedColor: {
      type: String,
      default: "#1890ff",
    },
      // 自定义颜色选择器绑定值
    customColor: {
      type: String,
      default: "#1890ff",
    },
  },
  data() {
    return {
    
    };
  },
  watch: {
    // 监听外部选中颜色的变化
    // selectedColor(newVal) {
    //   // this.customColor = newVal;
    // },
  },
  methods: {
    handleColorChange(color) {
      console.log("自定义颜色变化:", color);
      // this.$emit("color-change", color);
    },
    // 选择预设颜色
    handleColorSelect(color) {
      // this.selectedColor = color;
      this.$emit("color-change", color);
    },
    // 处理自定义颜色变化
    handleCustomColorChange(color) {
      this.customColor = color;
      // 发送自定义颜色变化事件，并标记为自定义颜色
      this.$emit("color-change", color, true);
    },
  },
};
</script>

<style scoped lang="scss">
/* 自定义按钮样式 */
.custom-button-container {
  display: flex;
  align-items: center;
  color: #348cf8;
  // padding: 5px 10px;
  // border-radius: 3px;
  // transition: background-color 0.2s ease;
}
.theme-color-group {
  margin-bottom: 20px;
}

.input-label {
  display: block;
  font-size: 14px;
  color: #333;
}

.color-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.color-item {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-right: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  border: 2px solid transparent;

  &.selected {
    border-color: #ccc;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
  }
}

.check-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M810.6 353.9L443.9 720.6a60.3 60.3 0 0 1-85.7 0L133.4 518.6c-12.3-12.3-12.3-32.3 0-44.6l42.4-42.4c12.3-12.3 32.3-12.3 44.6 0l175.1 175.3 347.1-347c12.3-12.3 32.3-12.3 44.6 0l42.4 42.4c12.2 12.3 12.2 32.3.1 44.6z" fill="%23fff"/></svg>')
    no-repeat center;
  background-size: contain;
}

.custom-color-wrapper {
  margin-left: 8px;
}
</style>
